import Vue from 'vue';
import { getKebabCase, getCamelCase } from '@/libs/utils';
import { getCurrentStyle } from '@/api/main.js';
import { styleConfig } from '@/style/theme/default.js'
import { loadingSvg } from '@/libs/svg'
function setThemeStyle(data) {
    let themeColorConfig = {};
    if (document.getElementById('theme-style')) {
        document
            .getElementsByTagName('head')[0]
            .removeChild(document.getElementById('theme-style'));
    }
    data.forEach((item) => {
        if (item.fieldType === 0) {
            let param = item.param;
            param = param.replace('model', 'modal');
            themeColorConfig[param] = item.content;
            if(param === 'step-active-color'){
                let image = loadingSvg(item.content)
                themeColorConfig['drill-loading-image'] = image
                themeColorConfig['drill-loading-bgimage'] = `url(${image})`
            }
        }
    });
    let node = document.createElement('style'),
        str = `body{${Object.keys(themeColorConfig)
            .map((key) => {
                return `--${key}:${themeColorConfig[key]}`;
            })
            .join(';')}}`;
    node.type = 'text/css';
    node.id = 'theme-style';
    if (node.styleSheet) {
        //ie下
        node.styleSheet.cssText = str;
    } else {
        node.innerHTML = str; //或者写成  nod.appendChild(document.createTextNode(str))
    }
    document.getElementsByTagName('head')[0].appendChild(node);
}
function setDefaultThemeStyle(data) {
    let themeColorConfig = data;
    if (document.getElementById('theme-style')) {
        document
            .getElementsByTagName('head')[0]
            .removeChild(document.getElementById('theme-style'));
    }
    let node = document.createElement('style'),
        str = `body{${Object.keys(themeColorConfig)
            .map((key) => {
                return `--${key}:${themeColorConfig[key]}`;
            })
            .join(';')}}`;
    node.type = 'text/css';
    node.id = 'theme-style';
    if (node.styleSheet) {
        //ie下
        node.styleSheet.cssText = str;
    } else {
        node.innerHTML = str; //或者写成  nod.appendChild(document.createTextNode(str))
    }
    document.getElementsByTagName('head')[0].appendChild(node);
}
export default {
    namespaced: true,
    state: {
        themeConfig: {},
        themeLoading: false
    },
    getters: {},
    mutations: {
        setThemeConfig({ themeConfig }, val) {
            setThemeStyle(val);
            val.forEach((item) => {
                let { param, content, file } = item;
                param = param.replace('model', 'modal');
                if (content) {
                    Vue.set(themeConfig, getCamelCase(param), content);
                } else if (file) {
                    Vue.set(themeConfig, getCamelCase(param), 'data:image/png;base64,' + file);
                    Vue.set(themeConfig, 'rankFirstImage', themeConfig['1thImage'])
                    Vue.set(themeConfig, 'rankSecondImage', themeConfig['2thImage'])
                    Vue.set(themeConfig, 'rankThirdImage', themeConfig['3thImage'])
                } else {
                    Vue.set(themeConfig, getCamelCase(param), '');
                }
            });
        },
        setDefaultThemeConfig({ themeConfig }, val) {
            setDefaultThemeStyle(val);
            for(let key in val){
                Vue.set(themeConfig, getCamelCase(key), val[key]);
            }
        },
        setThemeLoading(state, val) {
            state.themeLoading = val;
        }
    },
    actions: {
        async getTheme({ commit }) {
            // commit('setDefaultThemeConfig', styleConfig)
            // return 
            let needReq;
            if (JSON.stringify(this.state.style.themeConfig) === '{}') {
                needReq = true;
            }
            let ptThemeStyle = localStorage.getItem('ptThemeStyle');
            if (ptThemeStyle) {
                let data = JSON.parse(ptThemeStyle) || [];
                commit('setThemeConfig', data);
            }
            if (needReq && !this.state.style.themeLoading) {
                commit('setThemeLoading', true);
                let res = await getCurrentStyle().catch((error) => {
                    console.log('获取主题失败');
                });
                let { code, data, message } = res.data;
                if (code === 1) {
                    localStorage.setItem('ptThemeStyle', JSON.stringify(data));
                    commit('setThemeConfig', data);
                } else {
                    console.log(message);
                }
                commit('setThemeLoading', false);
            }
        }
    }
};
